<template>
  <view class="menu-container">
    <!-- 搜索区域 -->
    <view class="search-box">
      <view class="search-form">
        <view class="search-item">
          <text class="label">菜单名称</text>
          <input v-model="queryParams.menuName" type="text" placeholder="请输入菜单名称" @confirm="handleQuery" />
        </view>
        <view class="search-item">
          <text class="label">状态</text>
          <picker @change="handleStatusChange" :value="statusIndex" :range="statusOptions" range-key="label">
            <view class="picker-box">
              <text :class="{ 'placeholder': !queryParams.status }">
                {{ statusOptions[statusIndex].label }}
              </text>
              <uni-icons type="bottom" size="12" color="#909399"></uni-icons>
            </view>
          </picker>
        </view>
      </view>
      <view class="btn-group">
        <view class="btn search-btn" @tap="handleQuery">
          <uni-icons type="search" size="14" color="#fff"></uni-icons>
          <text>搜索</text>
        </view>
        <view class="btn reset-btn" @tap="resetQuery">
          <uni-icons type="refresh" size="14" color="#606266"></uni-icons>
          <text>重置</text>
        </view>
        <view class="btn add-btn" @tap="handleAdd">
          <uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
          <text>新增</text>
        </view>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list" v-if="treeList.length > 0">
      <view v-for="(item, index) in treeList" :key="index" class="menu-item">
        <view class="menu-info">
          <view class="menu-header">
            <view class="menu-title" @tap="toggleMenu(item)">
              <uni-icons :type="item.children && item.children.length > 0 ? (item.expanded ? 'bottom' : 'right') : 'circle'"
                        size="16"
                        :color="item.menuType === 'M' ? '#faa755' : item.menuType === 'C' ? '#409eff' : '#67c23a'">
              </uni-icons>
              <text class="menu-name">{{ item.menuName }}</text>
              <view :class="['menu-tag', item.menuType === 'M' ? 'tag-dir' : item.menuType === 'C' ? 'tag-menu' : 'tag-btn']">
                {{ getMenuType(item.menuType) }}
              </view>
              <view :class="['status-tag', item.status === '0' ? 'status-normal' : 'status-disabled']">
                {{ item.status === '0' ? '正常' : '停用' }}
              </view>
            </view>
            <view class="menu-actions">
              <button class="action-btn view-btn" @tap.stop="handleView(item)">
                <uni-icons type="eye" size="14" color="#909399"></uni-icons>
              </button>
              <button class="action-btn edit-btn" @tap.stop="handleEdit(item)">
                <uni-icons type="compose" size="14" color="#409eff"></uni-icons>
              </button>
              <button class="action-btn delete-btn" @tap.stop="handleDelete(item)">
                <uni-icons type="trash" size="14" color="#f56c6c"></uni-icons>
              </button>
            </view>
          </view>
        </view>

        <!-- 子菜单列表 -->
        <view v-if="item.expanded && item.children && item.children.length > 0" class="sub-menu-list">
          <view v-for="(child, childIndex) in item.children" :key="childIndex" class="menu-item">
            <view class="menu-info">
              <view class="menu-header">
                <view class="menu-title" @tap="toggleMenu(child)">
                  <uni-icons :type="child.children && child.children.length > 0 ? (child.expanded ? 'bottom' : 'right') : 'circle'"
                           size="16"
                           :color="child.menuType === 'M' ? '#faa755' : child.menuType === 'C' ? '#409eff' : '#67c23a'">
                  </uni-icons>
                  <text class="menu-name">{{ child.menuName }}</text>
                  <view :class="['menu-tag', child.menuType === 'M' ? 'tag-dir' : child.menuType === 'C' ? 'tag-menu' : 'tag-btn']">
                    {{ getMenuType(child.menuType) }}
                  </view>
                  <view :class="['status-tag', child.status === '0' ? 'status-normal' : 'status-disabled']">
                    {{ child.status === '0' ? '正常' : '停用' }}
                  </view>
                </view>
                <view class="menu-actions">
                  <button class="action-btn view-btn" @tap.stop="handleView(child)">
                    <uni-icons type="eye" size="14" color="#909399"></uni-icons>
                  </button>
                  <button class="action-btn edit-btn" @tap.stop="handleEdit(child)">
                    <uni-icons type="compose" size="14" color="#409eff"></uni-icons>
                  </button>
                  <button class="action-btn delete-btn" @tap.stop="handleDelete(child)">
                    <uni-icons type="trash" size="14" color="#f56c6c"></uni-icons>
                  </button>
                </view>
              </view>
            </view>

            <!-- 三级菜单 -->
            <view v-if="child.expanded && child.children && child.children.length > 0" class="sub-menu-list">
              <view v-for="(grandChild, grandChildIndex) in child.children"
                    :key="grandChildIndex"
                    class="menu-item">
                <view class="menu-info">
                  <view class="menu-header">
                    <view class="menu-title">
                      <uni-icons type="circle" size="16"
                                :color="grandChild.menuType === 'M' ? '#faa755' : grandChild.menuType === 'C' ? '#409eff' : '#67c23a'">
                      </uni-icons>
                      <text class="menu-name">{{ grandChild.menuName }}</text>
                      <view :class="['menu-tag', grandChild.menuType === 'M' ? 'tag-dir' : grandChild.menuType === 'C' ? 'tag-menu' : 'tag-btn']">
                        {{ getMenuType(grandChild.menuType) }}
                      </view>
                      <view :class="['status-tag', grandChild.status === '0' ? 'status-normal' : 'status-disabled']">
                        {{ grandChild.status === '0' ? '正常' : '停用' }}
                      </view>
                    </view>
                    <view class="menu-actions">
                      <button class="action-btn view-btn" @tap.stop="handleView(grandChild)">
                        <uni-icons type="eye" size="14" color="#909399"></uni-icons>
                      </button>
                      <button class="action-btn edit-btn" @tap.stop="handleEdit(grandChild)">
                        <uni-icons type="compose" size="14" color="#409eff"></uni-icons>
                      </button>
                      <button class="action-btn delete-btn" @tap.stop="handleDelete(grandChild)">
                        <uni-icons type="trash" size="14" color="#f56c6c"></uni-icons>
                      </button>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空数据提示 -->
    <view v-else class="empty-box">
      <uni-icons type="info" size="50" color="#999"></uni-icons>
      <text class="empty-text">暂无菜单数据</text>
    </view>
  </view>
</template>

<script>
import { listMenu, delMenu } from '@/api/system/menu'

export default {
  data() {
    return {
      queryParams: {
        menuName: undefined,
        status: undefined
      },
      menuList: [],
      treeList: [],
      loading: false,
      statusOptions: [
        { label: '全部', value: '' },
        { label: '正常', value: '0' },
        { label: '停用', value: '1' }
      ],
      statusIndex: 0
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    // 获取菜单列表
    async getList() {
      try {
        const res = await listMenu(this.queryParams)
        if (res.code === 200) {
          this.menuList = res.data || []
          // 构建树形结构
          this.treeList = this.buildMenuTree(this.menuList)
        }
      } catch (error) {
      }
    },

    // 构建树形结构
    buildMenuTree(menuList, parentId = 0) {
      // 如果有搜索条件，则不进行树形构建，直接返回列表
      if (this.queryParams.menuName || this.queryParams.status) {
        return menuList.map(menu => ({
          ...menu,
          expanded: false,
          children: []
        }))
      }

      // 没有搜索条件时，构建树形结构
      return menuList
        .filter(menu => menu.parentId === parentId)
        .map(menu => ({
          ...menu,
          expanded: false,
          children: this.buildMenuTree(menuList, menu.menuId)
        }))
        .sort((a, b) => a.orderNum - b.orderNum)
    },

    // 切换菜单展开状态
    toggleMenu(menu) {
      menu.expanded = !menu.expanded
      // 强制更新视图
      this.$forceUpdate()
    },

    // 获取菜单类型描述
    getMenuType(type) {
      const typeMap = {
        'M': '目录',
        'C': '菜单',
        'F': '按钮'
      }
      return typeMap[type] || '未知'
    },

    // 搜索
    handleQuery() {
      this.getList()
    },

    // 重置
    resetQuery() {
      this.queryParams = {
        menuName: undefined,
        status: undefined
      }
      this.statusIndex = 0
      this.handleQuery()
    },

    // 状态选择改变
    handleStatusChange(e) {
      this.statusIndex = e.detail.value
      this.queryParams.status = this.statusOptions[this.statusIndex].value
    },

    // 新增菜单
    handleAdd() {
      uni.navigateTo({
        url: '/pages/system/menu/form'
      })
    },

    // 编辑菜单
    handleEdit(item) {
      uni.navigateTo({
        url: `/pages/system/menu/form?menuId=${item.menuId.toString()}`
      })
    },

    // 删除菜单
    handleDelete(item) {
      uni.showModal({
        title: '提示',
        content: `是否确认删除名称为"${item.menuName}"的菜单项？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await delMenu(item.menuId.toString())
              if (result.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
                this.getList()
              }
            } catch (error) {
            }
          }
        }
      })
    },

    // 查看菜单详情
    handleView(item) {
      uni.navigateTo({
        url: `/pages/system/menu/form?menuId=${item.menuId.toString()}&type=view`
      })
    }
  }
}
</script>

<style lang="scss">
.menu-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20rpx;

  .search-box {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);

    .search-form {
      .search-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          width: 140rpx;
          font-size: 28rpx;
          color: #606266;
          font-weight: 500;
        }

        input {
          flex: 1;
          height: 72rpx;
          background-color: #f8f9fa;
          border-radius: 8rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
          color: #2c3e50;

          &::placeholder {
            color: #909399;
          }
        }

        .picker-box {
          flex: 1;
          height: 72rpx;
          background-color: #f8f9fa;
          border-radius: 8rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          text {
            color: #2c3e50;

            &.placeholder {
              color: #909399;
            }
          }

          .uni-icons {
            margin-left: 12rpx;
          }
        }
      }
    }

    .btn-group {
      display: flex;
      gap: 20rpx;
      margin-top: 30rpx;
      padding-top: 30rpx;
      border-top: 2rpx solid #f0f0f0;

      .btn {
        flex: 1;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12rpx;
        font-size: 28rpx;
        border-radius: 8rpx;
        transition: all 0.3s;

        &:active {
          transform: scale(0.98);
          opacity: 0.9;
        }

        &.search-btn {
          background-color: #409eff;
          color: #fff;

          &:active {
            background-color: #3a8ee6;
          }
        }

        &.reset-btn {
          background-color: #f5f7fa;
          color: #606266;
          border: 2rpx solid #dcdfe6;

          &:active {
            background-color: #e9e9eb;
          }
        }

        &.add-btn {
          background-color: #67c23a;
          color: #fff;

          &:active {
            background-color: #5daf34;
          }
        }
      }
    }
  }

  .menu-list {
    .menu-item {
      margin-bottom: 20rpx;

      .menu-info {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 20rpx 24rpx;
        box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);

        .menu-header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .menu-title {
            display: flex;
            align-items: center;
            gap: 12rpx;
            flex: 1;

            .menu-name {
              font-size: 28rpx;
              color: #2c3e50;
              font-weight: 500;
            }

            .menu-tag {
              padding: 4rpx 12rpx;
              border-radius: 6rpx;
              font-size: 22rpx;
              font-weight: normal;

              &.tag-dir {
                background-color: #fff7e6;
                color: #faa755;
              }

              &.tag-menu {
                background-color: #ecf5ff;
                color: #409eff;
              }

              &.tag-btn {
                background-color: #f0f9eb;
                color: #67c23a;
              }
            }

            .status-tag {
              padding: 4rpx 12rpx;
              border-radius: 6rpx;
              font-size: 22rpx;
              margin-left: 8rpx;

              &.status-normal {
                background-color: #f0f9eb;
                color: #67c23a;
              }

              &.status-disabled {
                background-color: #f4f4f5;
                color: #909399;
              }
            }
          }

          .menu-actions {
            display: flex;
            gap: 16rpx;

            .action-btn {
              width: 56rpx;
              height: 56rpx;
              padding: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 28rpx;
              background-color: #f8f9fa;
              border: none;

              &:active {
                opacity: 0.8;
              }

              &.edit-btn {
                &:active {
                  background-color: #ecf5ff;
                }
              }

              &.delete-btn {
                &:active {
                  background-color: #fef0f0;
                }
              }

              &.view-btn {
                &:active {
                  background-color: #f4f4f5;
                }
              }
            }
          }
        }
      }

      // 子菜单列表样式
      .sub-menu-list {
        margin-top: 16rpx;
        padding-left: 24rpx;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 12rpx;
          top: 0;
          bottom: 0;
          width: 2rpx;
          background-color: #e6e6e6;
        }

        .menu-item {
          position: relative;

          &::before {
            content: '';
            position: absolute;
            left: -12rpx;
            top: 32rpx;
            width: 16rpx;
            height: 2rpx;
            background-color: #e6e6e6;
          }

          &:last-child {
            margin-bottom: 0;

            &::after {
              content: '';
              position: absolute;
              left: -12rpx;
              top: 34rpx;
              bottom: -16rpx;
              width: 2rpx;
              background-color: #f5f7fa;
            }
          }
        }
      }
    }
  }

  .empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120rpx 0;
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 24rpx;

    .empty-text {
      margin-top: 24rpx;
      font-size: 28rpx;
      color: #909399;
      letter-spacing: 1rpx;
    }
  }
}
</style>